<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NBA球员的年龄与得分的关系散点图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/vintage.js"></script>
</head>
<body>
<div class="cart" style="width: 900px;height: 600px;margin: auto"></div>
<script>
    var myCharts = echarts.init(document.querySelector('.cart'),'vintage')
    var data = {{ data|tojson }}
    var option = {
        title:{
            text:'NBA球员的年龄与得分的关系',
            textStyle:{
                fontFamily:'楷体',
                fontSize:21
            },
            top:10,
            left:10
        },
        tooltip:{
            trigger:'item',
            triggerOn:'mousemove',
            formatter:function(res){
                return '年龄：'+res.value[0]+"<br>"+'场均得分：'+res.value[1].toFixed(1)
            }
        },
        legend:{
            name:['年龄-得分'],
            top: 10,
            textStyle: {
                fontSize: 14
            }
        },
        xAxis:{
            type:'value',
            scale: true,
            name:'年龄',
            nameLocation:'middle',
             nameTextStyle:{
                fontSize:16,
                 padding:10
            }
        },
        yAxis:{
            type:'value',
            scale:true,
            name:'得分',
            nameLocation:'middle',
            nameTextStyle:{
                fontSize:16,
                padding:15
            }
        },
        series:[
            {
                name:'年龄-得分',
                type:'effectScatter',
                showEffectOn:'emphasis',
                rippleEffect:{
                    scale:10
                },
                data:data,
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>